import React,{useEffect} from "react";
import { Modal, Form, Input, Button } from "antd";
import dialogStyle from "./cate.module.scss";
import {modifyCateById,addCateById} from "@/api/cate.js"
import {queryCateInfo} from "@/api/cate.js"
export default function TagDialog(props) {
  const [form] = Form.useForm();
  const { isOpen, onChange, type,id,getList } = props;
  console.log(props, "---props");
  useEffect(()=>{
      queryInfo(id);
  },[id])

  // 请求分类详情
  const queryInfo = async(id)=>{
    const res = await queryCateInfo(id);
    console.log(res,"cate")
    form.setFieldsValue({
      icon:res.data.icon || "",
      typeName:res.data.typeName,
    })
  }

  const handleCancel = () => {
    props.onChange();
  };


  const handleFinish = async(value)=>{
    // 进行修改或者添加.
    console.log(value,"ok")
    if(type===1) {
      await modifyCateById({typeName:value.typeName,id});
      getList();
    }else {
      await addCateById(value);
      getList();
    }
    form.resetFields();
    onChange();
  }
  const handleFinishFailed = ()=>{
    console.error("表单提交错误")
  }
  return (
    <div className="dialog">
      <Modal
        title={type === 1 ? "修改分类" : "新增分类"}
        open={isOpen}
        footer={null}
        onCancel={handleCancel}
        
      >
        <Form onFinish={handleFinish} onFinishFailed={handleFinishFailed} form={form}>
        <Form.Item
            name="icon"
            label="图标"
          >
            <Input ></Input>
          </Form.Item>
          <Form.Item
            name="typeName"
            label="分类名"
            rules={[
              {
                whitespace: true,
                type: "string",
                required: true,
                message: "请输入分类名",
              },
            ]}
          >
            <Input></Input>
          </Form.Item>
          <Form.Item>
            <div className={dialogStyle['btn-group']}>
              <Button htmlType="reset" className={dialogStyle['ant-btn']} onClick={handleCancel}>取消</Button>
              <Button htmlType="submit" type="primary" className={dialogStyle['ant-btn']} >
                确认
              </Button>
            </div>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}
